window.onload = function(){
	var chatBox = document.getElementById("chatBox");
	
	document.getElementById("send").onclick = function(){
		//发送信息
		var chatContent = document.getElementById("txtArea");
		addList("chatList left","img/webwxgeticon.jpg",chatContent.value);
		chatBox.scrollTop = chatBox.scrollHeight;
		
		//接受信息
		var xhttp = new XMLHttpRequest();
		var url1 = "http://www.tuling123.com/openapi/api?key=eda5f07d8930498ba6f26c4910265b0c&info=" + chatContent.value;
		xhttp.open("GET",url1,true);
		
		xhttp.onreadystatechange = function(){
			if(this.status == 200 && this.readyState == 4){
				//{"code":40002,"text":"有啥事吗？"} 对象
				// ({"code":40002,"text":"有啥事吗？"}).text
				var returnMessage = eval("(" + this.responseText + ")").text;
				addList("chatList right","img/webwxgeticon1.jpg",returnMessage);
			}
		}
		xhttp.send();
		chatBox.scrollTop = chatBox.scrollHeight;
		chatContent.value = "";
	}
	
	//动态添加标签
	function addList(className,imgSrc,chatContent){
//		<li class="chatList left">
//			<img src="img/webwxgeticon.jpg"/>
//			<span>你好你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！！</span>
//		</li>

		var oLi = document.createElement("li");//<li></li>
		oLi.className = className;//<li class="chatList left"></li>
		var oImg = document.createElement("img");
		oImg.src = imgSrc;//<img src="img/webwxgeticon.jpg"/>
		var oSpan = document.createElement("span");//<span></span>
		var oNode = document.createTextNode(chatContent);
		oSpan.appendChild(oNode);//<span>chatContent</span>
		
		oLi.appendChild(oImg);
		oLi.appendChild(oSpan);

		chatBox.appendChild(oLi);
	}
}
